<template>
  <div class="banner">
    <div class="aaa">
      <div class="text_style post-list-row">
        <h1>{{ hello }}</h1>
        <h2>{{ message }}</h2>
        <h2>{{ role }}</h2>
      </div>
      <div class="aaaaaa"></div>
    </div>
  </div>
</template>
<script>
import { GlobalMixin } from "../mixins/globalMixin";

export default {
  mixins: [GlobalMixin],
  data() {
    return {
      hello: "Hi,this is Meng",
      message: "一枚爱吃爱玩，爱折腾、爱生活的",
      role: "前端开发攻城师",
      timer: "",
      showpage: false,
    };
  },
  methods: {
    gonextPage() {
      this.showpage = true;
    },
  },
  mounted() {
  },
};
</script>
<style lang='scss' scoped>
@import "../styles/variable";
@media screen and (max-width: 799px) {
  .banner {
    .aaaaaa {
      padding-bottom: 23%;
    }
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100%;
    color: white;
    height: 100%;
    background: black url("../assets/bg1.jpeg") no-repeat center center scroll;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    .aaa {
      //蒙层
      background: black;
      width: 100%;
      height: 100%;
      // opacity: 0.4;
      -webkit-mask: -webkit-linear-gradient(
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4)
      );
    }
    .text_style {
      h1 {
        display: block;
        padding-top: 30vh;
        color: #fafafa;
        font-size: 30px;
        font-family: "Shadows Into Light", cursive;
      }
      h2 {
        font-family: "Source Sans Pro", sans-serif;
        // margin: 100px;
        display: block;
        color: #fafafa;
        font-size: 16px;
        // text-shadow: 0 0 5px rgb(136, 136, 136);
      }
    }
    .post-list-row {
      animation: post-list-row 3s;
      -webkit-animation: post-list-row 3ss;
    }
  }
}
@media screen and (min-width: 800px) {
  .banner {
    .aaaaaa {
      padding-bottom: 23%;
    }
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100%;
    color: white;
    height: 100%;
    background: black url("../assets/bg1.jpeg") no-repeat center center scroll;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    .aaa {
      //蒙层
      background: black;
      width: 100%;
      height: 100%;
      // opacity: 0.4;
      -webkit-mask: -webkit-linear-gradient(
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4)
      );
    }
    .text_style {
      h1 {
        display: block;
        padding-top: 30vh;
        color: #fafafa;
        font-size: 3em;
        font-family: "Shadows Into Light", cursive;
      }
      h2 {
        font-family: "Source Sans Pro", sans-serif;
        // margin: 100px;
        display: block;
        color: #fafafa;
        font-size: 2em;
        // text-shadow: 0 0 5px rgb(136, 136, 136);
      }
    }
    .post-list-row {
      animation: post-list-row 3s;
      -webkit-animation: post-list-row 3ss;
    }
  }
}

/*自定义动画*/
@keyframes post-list-row {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0) scale(0.9);
  }
}

@-webkit-keyframes post-list-row {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0) scale(0.9);
  }
}
</style>